<script setup lang="ts">

  // import useDarks from '../hooks/useDarks'
  const { t, locale } = useI18n()

  const { isDark, toggleDark } = useDarks()

  const toggleLocale = () => {
    locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
  }

  const language = computed(() => (locale.value === 'zh-CN' ? '中文' : 'English'))

  const theme = computed(() => (isDark.value ? 'dark' : 'light'))
</script>

<template>
  <div class="m-6">Hello，This is the tov template！！</div>
  <div class="cursor-pointer m-6" @click="toggleDark()">theme: {{ theme }}</div>

  <div class="cursor-pointer mt-6 ml-6" @click="toggleLocale()">
    <div>language: {{ language }}</div>
    <div>base: {{ t('about') }}</div>
    <div>nesting: {{ t('nesting.sir') }} {{ t('nesting.lady') }}</div>
  </div>

  <h1 data-aos="slide-up">item.title</h1>
</template>

<route lang="json">
  {"meta": {"layout": "empty"}}
</route>

